<template>
  <div class="nav">
    <div class="navwrap">
      <ul>
        <li>
          <a href="#">首页</a>
        </li>
        <li @click="b" :class="{active:flag1}">
          <router-link to="/commodity">商品列表</router-link>
        </li>
        <li>
          <a href="#">周边商城</a>
        </li>
        <li>
          <a href="#">活动专区</a>
        </li>
        <li>
          <a href="#">聚豆乐园</a>
        </li>
        <li>
          <a href="#">会员聚乐部</a>
        </li>
        <li @click="a" :class="{active: flag}">
          <router-link to="/personal"> 个人中心</router-link>
        </li>
      </ul>
      <div class="right">
        <router-link to="/gwc">购物车&nbsp;&nbsp;&nbsp;<span>{{cartList.length}}</span></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'tab',
  data () {
    return {
      count: 1,
      flag: false,
      flag1: true
    }
  },
  methods: {
    onclick (index) {
      this.count = index
    },
    a () {
      this.flag = true
      this.flag1 = false
    },
    b () {
      this.flag = false
      this.flag1 = true
    }
  },
  computed: {
    ...mapState('cart', ['cartList'])
  }
}
</script>

<style lang="scss" scoped>
.nav {
  height: 78px;
  background: none;
  background: #111;
  .navwrap {
    width: 1200px;
    height: 78px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    ul {
      display: flex;
      li {
        width: 125px;
        height: 78px;
        text-align: center;
        &:hover {
          a {
            color: #f74a4a;
          }
        }
        a {
          line-height: 78px;
          font-size: 18px;
          text-decoration: none;
          color: #9f9f9f;
        }
        a:hover {
          color: #f74a4a;
        }
      }
      .active {
        background: url(//js02.daoju.qq.com/common/images/channel/revision/cf/navico.png)
          no-repeat;
        background-position: -275px -5px;
        &:hover {
          a {
            color: #fff;
          }
        }
        a {
          font-size: 16px;
          font-weight: 900;
          color: #fff;
        }
      }
    }
    .right {
      width: 188px;
      height: 78px;
      text-align: center;
      line-height: 78px;
      font-size: 18px;
      color: #f74a4a;
      position: relative;
      i {
        position: absolute;
        top: 12px;
        right: 15px;
        z-index: 10;
        width: 60px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        font-size: 18px;
        display: block;
        overflow: hidden;
        text-indent: 0;
      }
      a {
        font-size: 18px;
        color: #f74a4a;
        text-decoration: none;
        outline: none;
      }
    }
  }
}
</style>
